<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1588861673,1022365495&fm=26&gp=0.jpg) no-repeat;
				background-size: cover;
			}

			.container {
				width: 900px;
				height: 600px;
				min-width: 900px;
				margin: 50px auto;
				position: relative;
				font-weight: 800;
				font-size: 18px;
				text-align: center;
				color: #B72E34;
			}

			.detail-wrap {
				display: flex;
				text-align: center;
				margin-top: 30px;
			}

			.detail-wrap div {
				margin: 20px;
			}

			.area {
				position: fixed;
				left: 0;
				top: 0;
			}

			.info {
				position: fixed;
				top: 3px;
				left: 330px;
				display: flex;
				display: none;
				color: #000000;
			}

			.info div {
				margin: 0 10px;
			}
			.info span {
				color: #F076AD;
			}
			input,button{
				outline: none;
				border: 0;
				background-color: transparent;
			}
			#searchVal {
				border-bottom: 1px solid #C7ED41;
				padding: 2px 3px;
			}
			.search {
				border: 1px solid #ccc;
				background: linear-gradient(to right, #F5EB1F,#F614AE);
				color: #FFFFFF;
			}
			.search:active {
				background: linear-gradient(to right, #2DF3F2,#F614AE);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="info">
				<div>
					城市：<span class="city"></span>
				</div>
				<div>经度：<span class="lat"></span></div>
				<div>纬度：<span class="long"></span></div>
				<div>地区编码：<span class="c12"></span></div>
			</div>
			<div class="detail-wrap"></div>
			<div class="area">
				城市：<input type="text" list="data" name="" id="searchVal" value="" autofocus="autofocus" autocomplete="on"/>
				<button class="search">查询</button>
			</div>
			<datalist id="data">
				<option>北京</option>
				<option>广东</option>
				<option>上海</option>
			</datalist>
		</div>


		<script src="./jquery-3.4.1.js"></script>
		<script type="text/javascript">
			//以下代码仅为演示用,具体传入参数请参看接口描述详情页.
			//需要引用jquery库
			$(function() {

				$('#searchVal').keyup(function(e) {
					if (e.keyCode === 13) $('.search').click()
				})
				//城市查询
				$('.search').click(function() {
					//以下代码仅为演示用,具体传入参数请参看接口描述详情页.
					//需要引用jquery库

					function formatterDateTime() {
						var date = new Date()
						var month = date.getMonth() + 1
						var datetime = date.getFullYear() +
							"" // "年"
							+
							(month >= 10 ? month : "0" + month) +
							"" // "月"
							+
							(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
							"" +
							(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
							"" +
							(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
							"" +
							(date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
						return datetime;
					}
					$.ajax({
						type: 'post',
						url: 'http://route.showapi.com/9-2',
						dataType: 'json',
						data: {
							"showapi_timestamp": formatterDateTime(),
							"showapi_appid": '386888', //这里需要改成自己的appid
							"showapi_sign": 'e0d0cb44a2f7449a9c67c8666ae22c7a', //这里需要改成自己的应用的密钥secret
							/* "areaCode":"530700",
							"areaid":"101291401", */
							"area": $('#searchVal').val(),
							"needMoreDay": "0",
							"needIndex": "0",
							"need3HourForcast": "0",
							"needAlarm": "0",
							"needHourData": ""
						},

						error: function(XmlHttpRequest, textStatus, errorThrown) {
							alert("操作失败!");
						},
						success: function(a) {
							$('.city').text(a.showapi_res_body.cityInfo.c3)
							$('.lat').text(a.showapi_res_body.cityInfo.latitude)
							$('.long').text(a.showapi_res_body.cityInfo.longitude)
							$('.c12').text(a.showapi_res_body.cityInfo.c12)
							$('.info').css('display', 'flex')
							for (let i = 1; i <= 3; i++) {
								$('.detail-wrap').append(
									`
							  <div class="detail${i}">
								  <img src="">
							  	<div class="day"></div>
									<div class="day_air_temperature"></div>
							  	<div class="day_weather"></div>
							  	<div class="air_press"></div>
							  	<div class="ziwaixian"></div>
							  	<div class="day_wind_direction"></div>
									<div class="day_wind_power"></div>
							  </div>
							`
								)
								$(`.detail${i} img`).attr('src', a['showapi_res_body'][`f${i}`]['day_weather_pic'])
								$(`.detail${i} .day_air_temperature`).text('温度：' + a['showapi_res_body'][`f${i}`]['day_air_temperature'] +
									'℃')
								$(`.detail${i} .day`).text('日期：' + setDate(a['showapi_res_body'][`f${i}`]['day']))
								$(`.detail${i} .day_weather`).text('天气状况：' + a['showapi_res_body'][`f${i}`]['day_weather'])
								$(`.detail${i} .air_press`).text('空气质量：' + a['showapi_res_body'][`f${i}`]['air_press'])
								$(`.detail${i} .ziwaixian`).text('紫外线：' + a['showapi_res_body'][`f${i}`]['ziwaixian'])
								$(`.detail${i} .day_wind_direction`).text('风向：' + a['showapi_res_body'][`f${i}`]['day_wind_direction'])
								$(`.detail${i} .day_wind_power`).text('风力：' + a['showapi_res_body'][`f${i}`]['day_wind_power'])
							}
						},
					});

					function setDate(data) {
						let y = data.slice(0, 4)
						let m = data.slice(4, 6)
						let d = data.slice(6, 8)
						return y + '年' + m + '月' + d + '号'
					}
					$('#searchVal').val('')
				})

			})
		</script>
	</body>
</html>
